<template>
<div class="system-settings-container">
  <div class="main-box">
    <div class="main-nav gray">
      <p style="font-weight:600;">系统配置</p>
      <p>可以在此增改系统的变量和分组，也可以自定义分组和变量，如果需要删除请从数据库中删除</p>
    </div>
    <el-tabs style="margin-top:20px;" v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name">
        {{item.content}}
      </el-tab-pane>
    </el-tabs>
    <el-table v-loading="loading" ref="orderTable" :data="tableData" :row-key="getRowKeys" style="width: 100%" border="true" @selection-change="dataListSelectionChange">
            <el-table-column label="变量标题" min-width="10">
              <template slot-scope="scope">
                <span>2</span>
              </template>
            </el-table-column>
            <el-table-column label="变量值" min-width="25">
              <template slot-scope="scope">
                <span>默认组</span>
              </template>
            </el-table-column>
            <el-table-column label="变量名" min-width="30">
              <template slot-scope="scope">
                <span>admin</span>
              </template>
            </el-table-column>
          </el-table>
  </div>
</div>
</template>

<script>
import DropdownMenu from '@/components/Share/dropdownMenu'

export default {
  name: 'Documentation',
  components: {
    DropdownMenu
  },
  data() {
    return {
      editableTabsValue: '2',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.system-settings-container {
  .main-box {
    height: 400px;
    margin: 20px;
  }

  .main-nav {
    padding: 20px;
    background: #e8edf0;
  }
}
</style>
